<template>
  <div>
    <ContentWrap>
      <!-- 搜索工作栏 -->
      <el-form
        ref="queryFormRef"
        :inline="true"
        :model="queryParams"
        class="-mb-15px"
        label-width="90px"
      >
        <el-form-item label="职能" prop="org">
          <el-select
            v-model="queryParams.org"
            placeholder="请选择职能"
            clearable
            size="large"
            style="width: 240px"
            @change="orgSelectChange"
          >
            <el-option v-for="(item, index) in orgList" :key="index" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="职能名称" prop="orgName">
          <el-input
            v-model="queryParams.orgName"
            class="!w-240px"
            clearable
            placeholder="请输入文档名称"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="职级" prop="level">
          <el-select
            v-model="queryParams.level"
            placeholder="请选择职能"
            clearable
            size="large"
            style="width: 240px"
          >
            <el-option
              v-for="(item, index) in levelList"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="职级名称" prop="levelName">
          <el-input
            v-model="queryParams.levelName"
            class="!w-240px"
            clearable
            placeholder="请输入发布人名称"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item v-hasPermi="['enterprise:org:query']">
          <div class="model-button">
            <el-button @click="handleQuery">
              <Icon class="mr-5px" icon="ep:search" />
              搜索
            </el-button>
            <el-button @click="resetQuery"> 重置 </el-button>
          </div>
        </el-form-item>
      </el-form>
      <!-- <div class="model-button" style="margin-top: 40px">
        <el-button color="#0D0D0D" v-hasPermi="['system:role:create']" @click="openForm('create')">
          <Icon class="mr-5px" icon="ep:plus" />
          新增
        </el-button>
      </div> -->

      <!-- 列表 -->
      <el-table v-loading="loading" :data="list" style="margin-top: 20px" stripe>
        <el-table-column align="center" label="职能" prop="org" />
        <el-table-column align="center" label="职能名称" prop="orgName" />
        <el-table-column align="center" label="职级" prop="level" />
        <el-table-column align="center" label="职级名称" prop="levelName" />
        <el-table-column
          align="center"
          label="创建时间"
          prop="createTime"
          sortable
          :formatter="dateFormatter"
        />
        <el-table-column :width="300" align="center" label="操作">
          <template #default="scope">
            <el-button
              v-hasPermi="['enterprise:org:update']"
              link
              type="primary"
              @click="openForm('update', scope.row.id)"
            >
              编辑
            </el-button>
            <!-- <el-button
              v-hasPermi="['system:role:delete']"
              link
              type="danger"
              @click="handleDelete(scope.row.id)"
            >
              删除
            </el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="flex align-items" style="justify-content: center">
        <Pagination
          v-model:limit="queryParams.pageSize"
          v-model:page="queryParams.pageNo"
          :total="total"
          @pagination="getList"
        />
      </div>
    </ContentWrap>

    <OrgFrom ref="formRef" @success="getList" />
  </div>
</template>

<script setup lang="ts">
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import * as RoleApi from '@/api/system/role'
import { GetOrgList, GetLevelList } from '@/api/system/org'
import { enterpriseOrgPage } from '@/api/enterprise/org'
import OrgFrom from './OrgFrom.vue'

const message = useMessage() // 消息弹窗

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
}

const queryFormRef = ref(null)
const loading = ref(false) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  org: '',
  orgName: '',
  level: '',
  levelName: ''
})

const orgList = ref([])
const apiGetOrgList = async () => {
  orgList.value = await GetOrgList()
}

const orgSelectChange = () => {
  queryParams.level = ''
  levelList.value = []
  if (queryParams.org) apiGetLevelList()
}

// 职级列表
const levelList = ref([])
const apiGetLevelList = async () => {
  levelList.value = await GetLevelList(queryParams.org)
}

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm('公司员工手册确定删除此文档？')
    // 发起删除
    await getDocDelete(id)
    message.success('删除成功')
    // 刷新列表
    await getList()
  } catch {}
}

/** 查询角色列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await enterpriseOrgPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

onMounted(() => {
  apiGetOrgList()
  apiGetLevelList()
  getList()
})
onUpdated(() => {})
onUnmounted(() => {})
</script>

<style scoped lang="scss">
:deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner) {
  background-color: var(--special-color);
  border-color: var(--special-color);
}

:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: var(--special-color);
  border-color: var(--special-color);
}
</style>
